<template>
  <div class="wrap">
    <header>新生报到实时数据</header>
    <p class="time">截至统计时间：{{allStatus.time}}</p>
    <div style="margin:20px auto 15px;">
      <flexbox justify="center">
        <flexbox-item>
          <div class="flex-box">录取人数：{{allStatus.admissionSum}}</div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-box"><strong>已报到人数</strong></div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-box">报到率：<strong style="font-size:16px;">{{allStatus.comersRateSum + "%"}}</strong></div>
        </flexbox-item>
      </flexbox>
    </div>
    <div>
      <countup :start-val="0"
               :end-val="number"
               :duration="2"
               tag="div"
               class="animation"></countup>
    </div>
    <div id="main"
         style="width: 100%; height: 300px;"></div>
    <div id="pie1"
         style="width: 100%; height: 300px;"></div>
    <div id="pie2"
         style="width: 100%; height: 300px;"></div>
    <!-- <div>
      <h3>全校专业报到率排名</h3>
      <ul class="item-wrap">
        <li class="item-box">
          <span class="ranking">排名</span>
          <span class="college-name">学院</span>
          <span class="college-proportion">报到率</span>
        </li>
        <li v-for="(item,index) in major"
            :key="index"
            class="item-box">
          <span class="ranking">{{index+1}}</span>
          <span class="college-name">{{item.majorAbbreviation}}</span>
          <span class="college-proportion">{{item.rate + "%"}}</span>
        </li>
      </ul>
    </div> -->
    <p class="copyright">技术支持&copy;三月软件小组</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 0,
      allStatus: [],
      departmentData: [],
      allName: [],
      allName_bar: [],
      allRate: [],
      allArriveNum: [],
      surplus: [],
      major: [], //专业报到率
      timer: 0
    };
  },
  mounted() {
    this.getDepartmentData(0);
    setInterval(() => {
      this.$router.go(0);
    }, 300000);
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
  methods: {
    toReport() {
      this.$vux.loading.show({
        text: "Loading"
      });
      setTimeout(() => {
        this.$vux.loading.hide();
        this.$router.push("/admin/reportChart");
      }, 300);
    },
    // 获取上方报到人数及比例
    getAllStatus() {
      this.axios({
        method: "get",
        url: "/student/getAllStatus"
      })
        .then(res => {
          if (res.data.code == 0) {
            this.allStatus = res.data.result;
            this.number = res.data.result.comersSum;
            this.timer = setTimeout(this.getDepartmentData, 20000);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 获取全部学院信息
    getDepartmentData(sex) {
      let _this = this;
      // 获取院系报到情况
      this.axios({
        method: "get",
        url: "/student/showRate",
        params: {
          type: 0,
          sex: sex
        }
      })
        .then(res => {
          if (res.data.code === 0) {
            this.allName = [];
            this.allName_bar = [];
            this.allRate = [];
            this.allArriveNum = [];
            this.surplus = [];
            this.departmentData = res.data.result;
            for (let i = 0; i < res.data.result.length; i++) {
              this.allName.unshift(res.data.result[i].name);
              this.allRate.unshift(res.data.result[i].rate);
              this.allArriveNum.unshift(res.data.result[i].arriveNum);
              this.surplus.unshift(
                res.data.result[i].allNum - res.data.result[i].arriveNum
              );
            }
            this.allName_bar = this.allName.map(function(value, key, array) {
              return (_this.allName_bar[key] = value);
            });
            // this.allName_bar = this.allName.map(function(value, key, array) {
            //   return (_this.allName_bar[key] =
            //     "(" + (array.length - key) + ")" + value);
            // });
            this.getAllStatus();
            // this.showCACRate();
            this.drawLine();
            this.drawLinePie1();
            this.drawLinePie2();
            localStorage.setItem("sex", sex);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // // 专业报到率
    // showCACRate() {
    //   this.axios({
    //     method: "get",
    //     url: "/student/showCACRate",
    //     params: {
    //       type: 1,
    //       sex: 0
    //     }
    //   })
    //     .then(res => {
    //       if (res.data.code === 0) {
    //         this.major = [];
    //         for (let i = 0; i < res.data.result.length; i++) {
    //           this.major.unshift(res.data.result[i]);
    //         }
    //         this.major = this.major.splice(0, 6);
    //       }
    //     })
    //     .catch(error => {
    //       console.log(error);
    //     });
    // },
    drawLine() {
      let _this = this;
      let myChart = this.echarts.init(document.getElementById("main"));
      let option = {
        title: {
          text: "各学院报到率",
          textAlign: "center",
          left: "50%",
          top: 0,
          textStyle: { color: "rgba(102, 102, 102, 1)", fontSize: "16" }
        },
        grid: {
          containLabel: true,
          left: "5%",
          bottom: 0,
          top: "7%",
          right: "5%"
        },
        xAxis: {
          type: "value",
          data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
          axisLabel: {
            interval: 0,
            rotate: 40
          }
        },
        yAxis: {
          type: "category",
          data: this.allName_bar,
          axisLabel: {
            interval: 0
          }
        },
        series: [
          {
            type: "bar",
            itemStyle: {
              normal: {
                color: function(params) {
                  let index = params.dataIndex;
                  let colorList = ["#2a5caa", "#37A2DA"];
                  if (index % 2 == 0) {
                    return colorList[0];
                  } else {
                    return colorList[1];
                  }
                }
              }
            },
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{c} %"
              }
            },
            data: this.allRate
          }
        ]
      };
      myChart.setOption(option);
      let autoHeight = this.allName.length * 28;
      myChart.getDom().style.height = autoHeight + "px";
      myChart.getDom().childNodes[0].style.height = autoHeight + "px";
      myChart.getDom().childNodes[0].childNodes[0].style.height =
        autoHeight + "px";
      myChart.resize();
    },
    drawLinePie1() {
      let _this = this;
      let myPie1 = this.echarts.init(document.getElementById("pie1"));
      let pieData = [];
      for (let i = 0; i < this.departmentData.length; i++) {
        let pie_data = {};
        pie_data.value = this.allArriveNum[i];
        pie_data.name = this.allName[i];
        pieData.push(pie_data);
      }
      let option = {
        title: {
          text: "各学院报到人数占比",
          textAlign: "center",
          left: "50%",
          top: 0,
          textStyle: { color: "rgba(102, 102, 102, 1)", fontSize: "16" }
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [15, 100],
            center: ["50%", "50%"],
            roseType: "area",
            labelLine: { length: 5 },
            data: pieData,
            color: [
              "#dd6b66",
              "#759aa0",
              "#e69d87",
              "#8dc1a9",
              "#ea7e53",
              "#eedd78",
              "#73a373",
              "#73b9bc",
              "#7289ab",
              "#91ca8c",
              "#f49f42"
            ]
          }
        ]
      };
      myPie1.setOption(option);
    },
    drawLinePie2() {
      let _this = this;
      let myPie2 = this.echarts.init(document.getElementById("pie2"));
      let pieData = [];
      for (let i = 0; i < this.departmentData.length; i++) {
        let pie_data = {};
        pie_data.value = this.surplus[i];
        pie_data.name = this.allName[i];
        pieData.push(pie_data);
      }
      let option = {
        title: {
          text: "各学院未报到人数占比",
          textAlign: "center",
          left: "50%",
          top: 0,
          textStyle: { color: "rgba(102, 102, 102, 1)", fontSize: "16" }
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [15, 100],
            center: ["50%", "50%"],
            roseType: "area",
            labelLine: { length: 5 },
            data: pieData,
            color: [
              "#dd6b66",
              "#759aa0",
              "#e69d87",
              "#8dc1a9",
              "#ea7e53",
              "#eedd78",
              "#73a373",
              "#73b9bc",
              "#7289ab",
              "#91ca8c",
              "#f49f42"
            ]
          }
        ]
      };
      myPie2.setOption(option);
    }
  }
};
</script>

<style lang="less" scoped>
.wrap {
  position: relative;
  background: linear-gradient(#fff, #afd0e4);
}
header {
  height: 60px;
  line-height: 60px;
  font-size: 21px;
  text-align: center;
  letter-spacing: 1px;
  color: #fff;
  background-color: rgba(11, 83, 155, 1);
}
.time {
  letter-spacing: 1px;
  font-size: 14px;
  text-align: center;
  margin: 15px 0;
  color: rgba(102, 102, 102, 1);
}
.flex-box {
  font-size: 14px;
  margin: 1px 0;
  color: rgba(102, 102, 102, 1);
}
.flex-content {
  font-size: 14px;
  padding-top: 5px;
  color: rgba(102, 102, 102, 0.8);
}
// vux.class.vux-flexbox
.vux-flexbox {
  text-align: center;
}
.tab-item {
  cursor: pointer;
  font-size: 16px !important;
  letter-spacing: 1px;
}
.button-tab-item {
  border: @button-tab-default-border-color;
}
.vux-button-group {
  width: 70%;
  margin: auto;
  margin-top: 15px;
}
.vux-button-group > a.vux-button-group-current {
  background-color: rgb(55, 174, 252);
}
.copyright {
  font-size: 11px;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translate(-50%, -50%);
}
.animation {
  font-size: 20vw;
  font-style: italic;
  color: #04be02;
  text-align: center;
  letter-spacing: 1vw;
  margin-bottom: 3vh;
}
h3 {
  text-align: center;
}
.item-wrap {
  margin-top: 3vh;
}
.item-box {
  display: flex;
  margin: 1.5vh 0;
  text-align: center;
  justify-content: space-evenly;
}
.ranking {
  font-size: 2.8vh;
  min-width: 3vw;
}
.college-name {
  font-size: 2.8vh;
  min-width: 9vw;
}
.college-proportion {
  font-size: 2.8vh;
  min-width: 4vw;
}
</style>
 
